<template>
    <div class="h100">
      <app-head :title="title"></app-head>
      <div >
        <div class=" flex_b">
           <div class="head">
             <div class="head_img ">
               <img :src='datas.headImg' alt="">
             </div>
           </div>
            <div class="head_r">
              <p style="color: #4A90E2;font-size: 17px;font-weight: 600"><span style="font-size: 18px">得分:</span> {{point}}</p>
              <dd style="margin: 14px 0">剩余时间：{{time}}秒</dd>
              <div class="step">
                <div class="stepAct" :style="{width:Wdith+'px'}">

                </div>
              </div>

            </div>
        </div>
        <div style="height: 10px;background:#f4f4f4;"></div>
       <div class="que_c">
         <p>Altima对应的国内量产车型叫什么名字？</p>
         <div >
           <button  @click="respon(index)"  class="btn_d" v-for="(item,index) in questions">
             {{item}}
           </button>
           <!--<button class="btn_d false">{{questions.question2}}</button>-->
           <!--<button class="btn_d">{{questions.question3}}</button>-->
           <!--<button class="btn_d">{{questions.question4}}</button>-->
         </div>
       </div>
      </div>

      <div class="get">
          +{{exVlue}}
      </div>
    </div>
</template>

<script>
  import AppHead from '@/components/Head'
    export default {
      name: "QuestionStep2",
      components:{
        AppHead
      },

        data () {
          return {
            title: '问答比拼',
            datas:{},
            questions:{},
            trueRe:'',
            point:20,
            time:60,
            exVlue:'',
            Wdith:20,
          //  题目数
            tip:0
          }
        },
      created:function () {
        this.init()
        this.questionDatas()
      },
      mounted:function () {
        var that =this

        setInterval(function () {
          that.time=that.time-1
          if(that.time<=0){
            that.time =0
          }
        },1000)
      },
      methods:{
        init:function () {
          var that = this
          this.$http({
            method: 'get',
            url: '/user/getuser',
            // params:{
            //   id:that.$route.query.id
            // }
          }).then(function (res) {


            that.datas = res.data.datas[0]

          }).catch(function (error) {

          })
        },
      //  获取题目
        questionDatas:function () {
          // document.getElementsByClassName("btn_d").classList.remove("act");
          var btn_d_len = document.getElementsByClassName("btn_d").length;
          console.log("btn_d_len"+btn_d_len)
          var that = this
          this.$http({
            method: 'get',
            url: '/question/questionDatas',
            // params:{
            //   id:that.$route.query.id
            // }
          }).then(function (res) {



            that.questions=res.data.datas[0].question1
            that.trueRe=res.data.datas[0].trueRe
          that.time = res.data.datas[0].time
          that.point = res.data.datas[0].point
          that.exVlue = res.data.datas[0].exVlue
          }).catch(function (error) {

          })
        },
        respon:function (ind) {
          var that =this
          var ti_idnex = ind+1
          that.tip++
          console.log('tip='+that.tip)

          if(ti_idnex==that.trueRe){

            document.getElementsByClassName("btn_d")[ind].classList.add("act");
            document.getElementsByClassName("get")[0].classList.add("act2");
            that.point = that.point+2
            that.Wdith = that.Wdith+20

            var aa = document.getElementsByClassName("btn_d")[ind]
            var dd = document.getElementsByClassName("get")[0]

            setTimeout(function () {

              aa.classList.remove('act')
              dd.classList.remove('act2')
              that.questionDatas()

            },800)


          }else{

            document.getElementsByClassName("btn_d")[ind].classList.add("false");

            document.getElementsByClassName("btn_d")[that.trueRe-1].classList.add("act");
            var aa = document.getElementsByClassName("btn_d")[ind]
            var dd = document.getElementsByClassName("btn_d")[that.trueRe-1]

            setTimeout(function (ind) {
              aa.classList.remove('false')
              dd.classList.remove('act')
              that.questionDatas()

              that.questionDatas()

            },800)
          }
          if(that.tip==5){
            setTimeout(function () {
              that.$router.push('/questionStep3')
            },500)
            return
          }
        },
        remoClass:function () {

        }
      }
    }
</script>

<style scoped lang="less">
 .head{
  width: 104px;
   border-radius:0px 100px 100px 0px;
   height: 88px;
   margin-top: 24px;
   box-shadow:0px 0px 6px 0px rgba(0,0,0,0.3);
    text-align: right;

   .head_img{
     width: 68px;
     height: 68px;
     border-radius: 50%;
     overflow: hidden;
     margin-top: 10px;
     margin-left: 24px;
     img{
       width: 100%;
       height: 100%;
     }
   }
 }
 .flex_b{
    align-items: center;
   justify-content: space-between;
   padding-bottom: 16px;
  }
.head_r{
  width: 70%;
  text-align: right;
  position: relative;
  p{
    margin-right: 24px;
  }
  dd{
    padding-right: 24px;
  }
  .step{
    height: 4px;
    width: 95%;

    height:4px;
    background:rgba(213,228,245,1);
    border-radius:100px 0px 0px 100px;position: absolute;
    right: 0;
    position: relative;
    .stepAct{
      height: 4px;

      position: absolute;
      height:4px;
      left: 0;
      background:#FFC800;
      border-radius:100px 0px 0px 100px;position: absolute;

    }
  }
}
 .que_c{
   margin-top: 64px;
   p{
     color: #333;
     font-size:16px;
     margin-bottom: 60px;
   }
 }
.btn_d{
  width:279px;
  height:53px;
  line-height: 53px;
  color: #4A90E2;
  font-size: 15px;
  background:rgba(255,255,255,1);
  border-radius:8px;
  border:1px solid #D8E5F4;
  display: inline-block;
  outline: none;
  margin-bottom: 16px;
}
.btn_d.act{
  background: #4A90E2;
  color: #fff;
}
 .btn_d.false{
   background: #E92525;
   color: #fff;
 }
 @keyframes mymove
 {
   from {bottom:0px;}
   to {bottom:50px;}
 }

 @-webkit-keyframes mymove /*Safari and Chrome*/
 {
   from {bottom:0px;}
   to {bottom:50px;}
 }
  .get{
    width:126px;
    height:57px;
    background:rgba(255,201,102,.7);
    border-radius:30px;
    font-size: 32px;
    color: #fff;

    line-height: 57px;
    /*height: 57px;*/
    left: 50%;
    margin-left: -60px;
    position: absolute;
    display: none;


  }
  .get.act2{
    font-size: 32px;
    animation:mymove 2s ;
    -webkit-animation:mymove 2s ; /*Safari and Chrome*/
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode:forwards;
    display: block;
    animation:mymove 2s ;
    -webkit-animation:mymove 2s ; /*Safari and Chrome*/
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode:forwards;
  }
</style>
